
<template>
  <div
    class="toggle-bar"
    :class="{'collapse':isActive}"
    @click="toggleClick"
  >
    <em-icon :name="isActive?collapseIcon:expandIcon" />
  </div>
</template>

<script>
export default {
  name: 'ToggleBar',
  props: {
    isActive: {
      type: Boolean,
      default: false
    },
    collapseIcon: {
      type: String,
      default: 'toggle-collapse'
    },
    expandIcon: {
      type: String,
      default: 'toggle-expand'
    }
  },
  methods: {
    toggleClick() {
      this.$emit('toggleClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.toggle-bar {
  position: absolute;
  left: 0;
  top: 20px;
  width: 15px;
  height: 30px;
  line-height: 30px;
  background: #c03639;
  color: #fff;
  cursor: pointer;
  .svg-icon {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
  }
  &.is-active {
    transform: rotate(90deg);
  }
}
</style>
